<template>
    <!-- 添加单一根元素，并使用与 YXLMDL 类似的类名 -->
    <view class="container wzdl">
        <div class="form">
            <!-- 游戏区服 -->
            <div class="form-item">
                <text class="label">游戏区服</text>
                <div class="handle" @click="showServerPicker">
                    <view class="selected-tag">
                        <!-- 使用计算属性简化 -->
                        {{ selectedServerText || '请选择您所在的区服' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>

            <!-- 代练类型 -->
            <div class="form-item" v-if="selectedorderType != '限时订单'">
                <text class="label">代练类型</text>
                <div class="handle" @click="showModePicker">
                    <view class="selected-tag">
                        {{ selectedMode || '请选择代练类型' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>

            <!-- 订单类别 -->
            <div class="form-item" v-if="selectedMode != '荣耀战力' && selectedMode != '大国标' && selectedMode != '小国标'">
                <text class="label">订单类别</text>
                <div class="handle" @click="showOrderTypePicker">
                    <view class="selected-tag">
                        {{ selectedorderType || '请选择订单类别' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 当前段位 -->
            <!-- 简化 v-if 条件 -->
            <div class="form-item" v-if="isRankVisible()">
                <text class="label">当前段位</text>
                <div class="handle" @click="showCurrentTaskTypePicker">
                    <view class="selected-tag">
                        {{ selectedCurrentTask || '请选择角色当前的段位' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 需打场次 -->
            <div class="form-item" v-if="selectedorderType == '全胜订单' && selectedMode != '荣耀战力'">
                <text class="label">需打场次</text>
                <div class="handle" @click="showNeedGamesPicker">
                    <view class="selected-tag">
                        {{ needGames || '请选择需打场次' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 终止时间 -->
            <div class="form-item" v-if="selectedorderType == '限时订单'">
                <text class="label">终止时间</text>
                <div class="handle" @click="showEndTimePicker">
                    <view class="selected-tag">
                        {{ endTimeDisplay || '请选择订单终止时间' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 订单删除时间 -->
            <div class="form-item" v-if="selectedorderType == '限时订单'">
                <text class="label">订单删除时间</text>
                <div class="handle" @click="showOrderDeleteTimePicker">
                    <view class="selected-tag">
                        {{ orderDeleteTimeDisplay || '请选择订单删除时间' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 英雄名称 -->
            <div class="form-item" v-if="isHeroRelatedMode()">
                <text class="label">英雄名称</text>
                <div class="handle" @click="showHeroPicker">
                    <view class="selected-tag">
                        {{ hero || '请选择英雄名称' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 拿标时间 -->
            <div class="form-item" v-if="isBidTimeMode()">
                <text class="label">拿标时间</text>
                <div class="handle" @click="showBidTimePicker">
                    <view class="selected-tag">
                        {{ selectedBidTime || '请选择您的拿标时间' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 当前战力 (仅大/小国标) -->
            <div class="form-item" v-if="isBidTimeMode()">
                <text class="label">当前战力</text>
                <div class="handle" @click="showPowerPicker">
                    <view class="selected-tag">
                        {{ tempCurrentPower || '请输入当前战力' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 代练任务（荣耀战力） -->
            <div class="form-item" v-if="selectedMode == '荣耀战力'">
                <text class="label">代练任务</text>
                <div class="handle" @click="showPowerPicker">
                    <view class="selected-tag">
                        {{ powerDisplay || '请输入当前战力和目标战力' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 铭文等级 (荣耀战力/国标) -->
            <div class="form-item" v-if="isHeroRelatedMode()">
                <text class="label">铭文等级</text>
                <div class="handle" @click="showRoleTypePicker">
                    <view class="selected-tag">
                        {{ tempMingwenLevel || '请输入铭文等级' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 角色信息 (非荣耀战力/国标) -->
            <div class="form-item" v-if="!isHeroRelatedMode()">
                <text class="label">角色信息</text>
                <div class="handle" @click="showRoleTypePicker">
                    <view class="selected-tag">
                        {{ roleDisplay || '请输入铭文等级和英雄数量' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>

            <!-- 当前分数 (10v10/巅峰赛 全胜) -->
            <div class="form-item"
                v-if="(selectedMode == '10V10排位赛' || selectedMode == '巅峰赛') && selectedorderType == '全胜订单'">
                <text class="label">当前分数</text>
                <div class="handle" @click="showCurrentScorePicker">
                    <view class="selected-tag">
                        {{ tempCurrentScore || '请输入当前分数' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>

            <!-- 代练任务（巅峰赛 普通/限时） -->
            <div class="form-item" v-if="selectedMode == '巅峰赛' && selectedorderType != '全胜订单'">
                <text class="label">代练任务</text>
                <div class="handle" @click="showBranchRoadsPicker">
                    <view class="selected-tag">
                        {{ peakRankDisplay || '请选择分路位置与代练任务' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>

            <!-- 代练任务 (普通排位) -->
            <div class="form-item" v-if="isNormalRankMode()">
                <text class="label">代练任务</text>
                <div class="handle" @click="showCurrentTaskTypePicker">
                    <view class="selected-tag">
                        {{ normalRankDisplay || '请选择当前段位和目标段位' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
        </div>

        <!-- Popups (保持与 YXLM 结构一致) -->
        <!-- 游戏区服选择弹窗 -->
        <uni-popup ref="serverPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择游戏区服</div>
                <div class="body">
                    <scroll-view scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y class="popup-scroll">
                        <view v-if="selectedGroupIndex !== null && serverTree[selectedGroupIndex]" class="popup-group">
                            <view v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                                class="popup-item" @click="selectServerItem(item)">
                                {{ item.text }}
                            </view>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </scroll-view>
                </div>
                <!-- 新增取消按钮 -->
                <view class="popup-footer" @click="hideServerPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 代练类型选择弹窗 -->
        <uni-popup ref="modePopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择代练类型</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in modeTree" :key="index" class="popup-item"
                        @click="selectModeItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideModePicker">取消</view>
            </view>
        </uni-popup>

        <!-- 订单类别选择弹窗 -->
        <uni-popup ref="orderTypePopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择订单类别</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in orderTypeTree" :key="index" class="popup-item"
                        @click="selectOrderTypeItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideOrderTypePicker">取消</view>
            </view>
        </uni-popup>

        <!-- 铭文等级和英雄数量弹窗 -->
        <uni-popup ref="roleTypePopup" type="bottom">
            <!-- 使用与 YXLM 一致的 input-popup 结构 -->
            <view class="popup-content input-popup">
                <div class="top">{{ isHeroRelatedMode() ? '铭文等级' : '角色信息' }}</div>
                <div class="input-row">
                    <span>铭文等级</span>
                    <input type="number" placeholder="请输入铭文等级" v-model="tempMingwenLevel">
                </div>
                <div class="input-row" v-if="!isHeroRelatedMode()">
                    <span>英雄数量</span>
                    <input type="number" placeholder="请输入英雄数量" v-model="tempHeroCount">
                </div>
                <view class="popup-footer2">
                    <span class="cancel" @click="hideRoleTypePicker">取消</span>
                    <span class="confirm" @click="confirmRoleTypePicker">确认</span>
                </view>
            </view>
        </uni-popup>

        <!-- 当前战力和目标战力弹窗 -->
        <uni-popup ref="powerPopup" type="bottom">
            <view class="popup-content input-popup">
                <div class="top">{{ isBidTimeMode() ? '当前战力' : '荣耀战力任务' }}</div>
                <div class="input-row">
                    <span>当前战力</span>
                    <input type="number" placeholder="请输入当前战力" v-model="tempCurrentPower">
                </div>
                <!-- 目标战力仅在荣耀战力模式下显示 -->
                <div class="input-row" v-if="selectedMode == '荣耀战力'">
                    <span>目标战力</span>
                    <input type="number" placeholder="请输入目标战力" v-model="tempToPower">
                </div>
                <view class="popup-footer2">
                    <span class="cancel" @click="hidePowerPicker">取消</span>
                    <span class="confirm" @click="confirmPowerPicker">确认</span>
                </view>
            </view>
        </uni-popup>

        <!-- 英雄选择弹窗 -->
        <uni-popup ref="heroPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择英雄</div>
                <!-- HeroSelect 组件需要正确注册和使用 -->
                <HeroSelect :hero-list="heroTree" @select="selectHeroItem" ref="heroSelectComponent" />
                <view class="popup-footer" @click="hideHeroPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 拿标时间选择弹窗 -->
        <uni-popup ref="bidTimePopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择拿标时间</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in bidTimeTree" :key="index" class="popup-item"
                        @click="selectBidTimeItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideBidTimePicker">取消</view>
            </view>
        </uni-popup>

        <!-- 当前分数弹窗 -->
        <uni-popup ref="currentScorePopup" type="bottom">
            <view class="popup-content input-popup">
                <div class="top">当前分数</div>
                <div class="input-row score-input"> <!-- 使用 YXLM 的 score-input 样式 -->
                    <span>分数</span>
                    <input type="number" placeholder="请输入当前分数" v-model="tempCurrentScore">
                </div>
                <view class="popup-footer2">
                    <span class="cancel" @click="hideCurrentScorePicker">取消</span>
                    <span class="confirm" @click="confirmCurrentScorePicker">确认</span>
                </view>
            </view>
        </uni-popup>

        <!-- 分路选择弹窗 -->
        <uni-popup ref="branchRoadsPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择分路位置</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in branchRoadsTree" :key="index" class="popup-item"
                        @click="selectBranchRoadsItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideBranchRoadsPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 巅峰赛分数选择弹窗 -->
        <uni-popup ref="toScorePopup" type="bottom">
            <view class="popup-content input-popup">
                <div class="top">巅峰赛分数</div>
                <div class="input-row">
                    <span>当前分数</span>
                    <input type="number" placeholder="请输入当前分数" v-model="tempNowScore">
                </div>
                <div class="input-row">
                    <span>目标分数</span>
                    <input type="number" placeholder="请输入目标分数" v-model="tempToScore">
                </div>
                <view class="popup-footer2">
                    <span class="cancel" @click="hideToScorePicker">取消</span>
                    <span class="confirm" @click="confirmToScorePicker">确认</span>
                </view>
            </view>
        </uni-popup>

        <!-- 当前段位选择弹窗 (结构与 YXLM 一致) -->
        <uni-popup ref="currentTaskTypePopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择当前段位</div>
                <div class="body">
                    <scroll-view scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedCurrentTaskGroupIndex === groupIndex }"
                            @click="selectCurrentTaskGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y class="popup-scroll">
                        <view v-if="selectedCurrentTaskGroupIndex !== null && Task[selectedCurrentTaskGroupIndex]"
                            class="popup-group">
                            <!-- 王者荣耀段位结构不同，需要调整 -->
                            <div v-for="(subTier, subIndex) in Task[selectedCurrentTaskGroupIndex].children"
                                :key="subIndex" class="popup-item-subtier">
                                <div class="popup-item-title" v-if="Task[selectedCurrentTaskGroupIndex].text !== '王者'">
                                    {{ subTier.text }}</div>
                                <div class="popup-item-body rank-body">
                                    <!-- 王者需要特殊处理星级显示 -->
                                    <view v-if="Task[selectedCurrentTaskGroupIndex].text === '王者'"
                                        @click="selectCurrentTaskItem(Task[selectedCurrentTaskGroupIndex].text, subTier.text)"
                                        class="popup-item-body-item rank-item">
                                        <span>{{ subTier.text }}</span>
                                    </view>
                                    <view v-else v-for="(star, starIndex) in subTier.children" :key="starIndex"
                                        @click="selectCurrentTaskItem(subTier.text, star.text)"
                                        class="popup-item-body-item rank-item">
                                        <span>{{ star.text }}</span>
                                    </view>
                                </div>
                            </div>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </scroll-view>
                </div>
                <view class="popup-footer" @click="hideCurrentTaskTypePicker">取消</view>
            </view>
        </uni-popup>

        <!-- 目标段位选择弹窗 (结构与 YXLM 一致) -->
        <uni-popup ref="toTaskTypePopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择目标段位</div>
                <div class="body">
                    <scroll-view scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedToTaskGroupIndex === groupIndex }"
                            @click="selectToTaskGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y class="popup-scroll">
                        <view v-if="selectedToTaskGroupIndex !== null && Task[selectedToTaskGroupIndex]"
                            class="popup-group">
                            <div v-for="(subTier, subIndex) in Task[selectedToTaskGroupIndex].children" :key="subIndex"
                                class="popup-item-subtier">
                                <div class="popup-item-title" v-if="Task[selectedToTaskGroupIndex].text !== '王者'">{{
                                    subTier.text }}</div>
                                <div class="popup-item-body rank-body">
                                    <view v-if="Task[selectedToTaskGroupIndex].text === '王者'"
                                        @click="selectToTaskItem(Task[selectedToTaskGroupIndex].text, subTier.text)"
                                        class="popup-item-body-item rank-item">
                                        <span>{{ subTier.text }}</span>
                                    </view>
                                    <view v-else v-for="(star, starIndex) in subTier.children" :key="starIndex"
                                        @click="selectToTaskItem(subTier.text, star.text)"
                                        class="popup-item-body-item rank-item">
                                        <span>{{ star.text }}</span>
                                    </view>
                                </div>
                            </div>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </scroll-view>
                </div>
                <view class="popup-footer" @click="hideToTaskTypePicker">取消</view>
            </view>
        </uni-popup>

        <!-- 终止时间选择器弹窗 -->
        <uni-popup ref="endTimePopup" type="bottom">
            <view class="popup-content">
                <!-- TODO: 确认 WZ 的时间选择器样式是否与 YXLM 不同，此处暂用旧结构 -->
                <view class="time-selector">
                    <view class="time-scroll">
                        <view class="date-display">明天</view>
                    </view>
                    <scroll-view scroll-y class="time-scroll">
                        <view v-for="(item, index) in timeOptions" :key="index" class="time-item"
                            :class="{ selected: selectedEndTimeIndex === index }" @click="selectEndTime(item, index)">
                            <!-- 传递 index -->
                            {{ item }}
                        </view>
                    </scroll-view>
                </view>
                <!-- 添加确认和取消 -->
                <view class="popup-footer2">
                    <span class="cancel" @click="hideEndTimePicker">取消</span>
                    <span class="confirm" @click="confirmEndTimePicker">确认</span>
                </view>
            </view>
        </uni-popup>

        <!-- 订单删除时间选择器弹窗 -->
        <uni-popup ref="orderDeleteTimePopup" type="bottom">
            <view class="popup-content">
                <view class="time-selector">
                    <view class="time-scroll">
                        <view class="date-display">明天</view>
                    </view>
                    <scroll-view scroll-y class="time-scroll">
                        <view v-for="(item, index) in timeOptions" :key="index" class="time-item"
                            :class="{ selected: selectedOrderDeleteTimeIndex === index }"
                            @click="selectOrderDeleteTime(item, index)"> <!-- 传递 index -->
                            {{ item }}
                        </view>
                    </scroll-view>
                </view>
                <view class="popup-footer2">
                    <span class="cancel" @click="hideOrderDeleteTimePicker">取消</span>
                    <span class="confirm" @click="confirmOrderDeleteTimePicker">确认</span>
                </view>
            </view>
        </uni-popup>

        <!-- 需打场次选择器弹窗 -->
        <uni-popup ref="needGamesPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择需打场次</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in needGamesTree" :key="index" class="popup-item"
                        @click="selectNeedGamesItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideNeedGamesPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 订单信息区域 (结构与 YXLM 一致) -->
        <div class="orderMsg">
            <div class="pay">
                <image src="../../static/icons/pay.png"></image>
                <!-- 动态计算价格和时间 -->
                <div class="text">建议出价 <span class="price-highlight">{{ suggestedPrice }}元</span></div>
            </div>
            <div class="time">
                <image src="../../static/icons/time.png"></image>
                <div class="text">预计时限 <span class="time-highlight">{{ estimatedTime }}小时</span></div>
            </div>
        </div>

        <!-- Placeholder for footer (结构与 YXLM 一致) -->
        <view class="footer-placeholder"></view>

        <!-- 底部按钮 (结构与 YXLM 一致) -->
        <div class="footer">
            <div class="tip">代练通全程为您服务</div>
            <div class="button" @click="submitOrder">下一步</div>
        </div>
    </view>
</template>

<script>
// 移除 Vue 3 导入
// import { ref, onMounted } from "vue";
import HeroSelect from "../selectHeroForm/index.vue"
// 导入 uni-app 的 onLoad (在 Options API 中通常不需要直接使用)
// import { onLoad } from '@dcloudio/uni-app'

export default {
    components: {
        HeroSelect // 注册组件
    },
    data() {
        return {
            // Server Selection
            serverTree: [
                {
                    text: '安卓QQ',
                    value: "安卓QQ",
                    children: [
                        { text: '默认服', value: "默认服" },
                        { text: '手Q抢先服', value: "手Q抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            text: `手Q${i + 1}区`,
                            value: `手Q${i + 1}区`
                        })).slice(1)
                    ]
                },
                {
                    text: '安卓WX',
                    value: "安卓WX",
                    children: [
                        { text: '默认服', value: "默认服" },
                        { text: '微信抢先服', value: "微信抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            text: `微信${i + 1}区`,
                            value: `微信${i + 1}区`
                        })).slice(1)
                    ]
                },
                {
                    text: '苹果QQ',
                    value: "苹果QQ",
                    children: [
                        { text: '默认服', value: "默认服" },
                        { text: '手Q抢先服', value: "手Q抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            text: `手Q${i + 1}区`,
                            value: `手Q${i + 1}区`
                        })).slice(1)
                    ]
                },
                {
                    text: '苹果WX',
                    value: "苹果WX",
                    children: [
                        { text: '默认服', value: "默认服" },
                        { text: '微信抢先服', value: "微信抢先服" },
                        ...Array.from({ length: 600 }, (_, i) => ({
                            text: `微信${i + 1}区`,
                            value: `微信${i + 1}区`
                        })).slice(1)
                    ]
                },
            ],
            selectedServer: "默认服",
            selectedGroupIndex: 0,

            // Mode Selection
            modeTree: [
                { text: '5V5排位赛', value: "5V5排位赛" },
                { text: '10V10排位赛', value: "10V10排位赛" },
                { text: '巅峰赛', value: "巅峰赛" },
                { text: '荣耀战力', value: "荣耀战力" },
                { text: '大国标', value: "大国标" },
                { text: '小国标', value: "小国标" },
            ],
            selectedMode: "5V5排位赛",

            // Order Type Selection
            orderTypeTree: [
                { text: '普通订单', value: "普通订单" },
                { text: '限时订单', value: "限时订单" },
                { text: '全胜订单', value: "全胜订单" },
            ],
            selectedorderType: "普通订单",

            // Hero Selection
            heroTree: [
                { text: "澜", value: "澜" }, { text: "夏洛特", value: "夏洛特" }, { text: "阿古朵", value: "阿古朵" },
                { text: "蒙恬", value: "蒙恬" }, { text: "镜", value: "镜" }, { text: "蒙犽", value: "蒙犽" },
                { text: "鲁班大师", value: "鲁班大师" }, { text: "西施", value: "西施" }, { text: "马超", value: "马超" },
                { text: "曜", value: "曜" }, { text: "云中君", value: "云中君" }, { text: "瑶", value: "瑶" },
                { text: "盘古", value: "盘古" }, { text: "猪八戒", value: "猪八戒" }, { text: "嫦娥", value: "嫦娥" },
                { text: "上官婉儿", value: "上官婉儿" }, { text: "李信", value: "李信" }, { text: "沈梦溪", value: "沈梦溪" },
                { text: "伽罗", value: "伽罗" }, { text: "盾山", value: "盾山" }, { text: "司马懿", value: "司马懿" },
                { text: "孙策", value: "孙策" }, { text: "元歌", value: "元歌" }, { text: "米莱狄", value: "米莱狄" },
                { text: "狂铁", value: "狂铁" }, { text: "弈星", value: "弈星" }, { text: "裴擒虎", value: "裴擒虎" },
                { text: "杨玉环", value: "杨玉环" }, { text: "公孙离", value: "公孙离" }, { text: "明世隐", value: "明世隐" },
                { text: "女娲", value: "女娲" }, { text: "梦奇", value: "梦奇" }, { text: "苏烈", value: "苏烈" },
                { text: "百里玄策", value: "百里玄策" }, { text: "百里守约", value: "百里守约" }, { text: "铠", value: "铠" },
                { text: "鬼谷子", value: "鬼谷子" }, { text: "干将莫邪", value: "干将莫邪" }, { text: "东皇太一", value: "东皇太一" },
                { text: "大乔", value: "大乔" }, { text: "黄忠", value: "黄忠" }, { text: "诸葛亮", value: "诸葛亮" },
                { text: "哪吒", value: "哪吒" }, { text: "太乙真人", value: "太乙真人" }, { text: "蔡文姬", value: "蔡文姬" },
                { text: "雅典娜", value: "雅典娜" }, { text: "杨戬", value: "杨戬" }, /* { text: "苍", value: "苍" }, */ // 移除重复/错误项
                { text: "成吉思汗", value: "成吉思汗" }, // 补全成吉思汗
                { text: "钟馗", value: "钟馗" }, { text: "虞姬", value: "虞姬" }, { text: "李元芳", value: "李元芳" },
                { text: "张飞", value: "张飞" }, { text: "刘备", value: "刘备" }, { text: "后羿", value: "后羿" },
                { text: "牛魔", value: "牛魔" }, { text: "孙悟空", value: "孙悟空" }, { text: "亚瑟", value: "亚瑟" },
                { text: "橘右京", value: "橘右京" }, { text: "娜可露露", value: "娜可露露" }, { text: "不知火舞", value: "不知火舞" },
                { text: "张良", value: "张良" }, { text: "花木兰", value: "花木兰" }, { text: "兰陵王", value: "兰陵王" },
                { text: "王昭君", value: "王昭君" }, { text: "韩信", value: "韩信" }, { text: "刘邦", value: "刘邦" },
                { text: "姜子牙", value: "姜子牙" }, { text: "露娜", value: "露娜" }, { text: "程咬金", value: "程咬金" },
                { text: "安琪拉", value: "安琪拉" }, { text: "貂蝉", value: "貂蝉" }, { text: "关羽", value: "关羽" },
                { text: "老夫子", value: "老夫子" }, { text: "武则天", value: "武则天" }, { text: "项羽", value: "项羽" },
                { text: "达摩", value: "达摩" }, { text: "狄仁杰", value: "狄仁杰" }, { text: "马可波罗", value: "马可波罗" },
                { text: "李白", value: "李白" }, { text: "宫本武藏", value: "宫本武藏" }, { text: "典韦", value: "典韦" },
                { text: "曹操", value: "曹操" }, { text: "甄姬", value: "甄姬" }, { text: "夏侯惇", value: "夏侯惇" },
                { text: "周瑜", value: "周瑜" }, { text: "吕布", value: "吕布" }, { text: "芈月", value: "芈月" },
                { text: "白起", value: "白起" }, { text: "扁鹊", value: "扁鹊" }, { text: "孙膑", value: "孙膑" },
                { text: "钟无艳", value: "钟无艳" }, { text: "阿轲", value: "阿轲" }, { text: "高渐离", value: "高渐离" },
                { text: "刘禅", value: "刘禅" }, { text: "庄周", value: "庄周" }, { text: "鲁班七号", value: "鲁班七号" },
                { text: "孙尚香", value: "孙尚香" }, { text: "嬴政", value: "嬴政" }, { text: "妲己", value: "妲己" },
                { text: "墨子", value: "墨子" }, { text: "赵云", value: "赵云" }, { text: "小乔", value: "小乔" },
                { text: "廉颇", value: "廉颇" }, { text: "艾琳", value: "艾琳" }, { text: "云缨", value: "云缨" },
                { text: "金蝉", value: "金蝉" }, { text: "司空震", value: "司空震" }, { text: "暃", value: "暃" },
                { text: "桑启", value: "桑启" }, { text: "戈娅", value: "戈娅" }, { text: "海月", value: "海月" },
                { text: "赵怀真", value: "赵怀真" }, { text: "莱西奥", value: "莱西奥" }, { text: "姬小满", value: "姬小满" },
                { text: "亚连", value: "亚连" }, { text: "朵莉亚", value: "朵莉亚" }, { text: "海诺", value: "海诺" },
                { text: "敖隐", value: "敖隐" }, { text: "大司命", value: "大司命" }, { text: "元流之子(战)", value: "元流之子(战)" },
                { text: "元流之子(法)", value: "元流之子(法)" }, { text: "少司缘", value: "少司缘" }, { text: "影", value: "影" },
                { text: "空空儿", value: "空空儿" }, { text: "元流之子（射手）", value: "元流之子（射手）" }
            ],
            hero: "",

            // Bid Time Selection
            bidTimeTree: [], // Generated in mounted/onLoad
            selectedBidTime: "",

            // Role Info (Mingwen/Hero Count)
            mingwenLevel: '', // Final value
            heroCount: '',   // Final value
            tempMingwenLevel: '', // For popup input
            tempHeroCount: '',    // For popup input

            // Power Info (Current/Target)
            currentPower: '', // Final value
            toPower: '',      // Final value
            tempCurrentPower: '', // For popup input
            tempToPower: '',    // For popup input

            // Current Score
            currentScore: '', // Final value
            tempCurrentScore: '', // For popup input

            // Branch Roads (Peak Rank)
            branchRoadsTree: [
                { text: '对抗路', value: "对抗路" }, { text: '游走', value: "游走" },
                { text: '中路', value: "中路" }, { text: '发育路', value: "发育路" },
                { text: '打野', value: "打野" },
            ],
            selectedbranchRoads: "",

            // Peak Score (Target Score)
            nowScore: '', // Final value
            toScore: '',  // Final value
            tempNowScore: '', // For popup input
            tempToScore: '',  // For popup input

            // Rank Task Selection
            Task: [], // Generated in mounted/onLoad
            selectedCurrentTask: "",
            selectedCurrentTaskGroupIndex: 0,
            selectedToTask: "",
            selectedToTaskGroupIndex: 0,

            // End Time Selection
            endTime: "", // Final value (e.g., "14:00")
            tomorrow: "", // Calculated date part (e.g., "08月16日")
            tempEndTime: "", // For popup selection state
            selectedEndTimeIndex: -1, // For popup highlight
            timeOptions: [], // Generated in mounted/onLoad

            // Order Delete Time Selection
            orderDeleteTime: "", // Final value
            tempOrderDeleteTime: "", // For popup selection state
            selectedOrderDeleteTimeIndex: -1, // For popup highlight

            // Need Games Selection
            needGamesTree: [
                { text: '5场', value: "5场" }, { text: '6场', value: "6场" }, { text: '7场', value: "7场" },
                { text: '8场', value: "8场" }, { text: '9场', value: "9场" }, { text: '10场', value: "10场" },
            ],
            needGames: "",

            // Price/Time Display (Example static values)
            suggestedPrice: 87,
            estimatedTime: 47,
        };
    },
    computed: {
        selectedServerText() {
            if (this.serverTree && this.serverTree[this.selectedGroupIndex] && this.selectedServer) {
                return `${this.serverTree[this.selectedGroupIndex].text}/${this.selectedServer}`;
            }
            return '';
        },
        endTimeDisplay() {
            if (this.tomorrow && this.endTime) {
                return `${this.tomorrow} ${this.endTime}`;
            }
            return '';
        },
        orderDeleteTimeDisplay() {
            if (this.tomorrow && this.orderDeleteTime) {
                return `${this.tomorrow} ${this.orderDeleteTime}`;
            }
            return '';
        },
        powerDisplay() {
            // Combine temp values for display before confirmation
            if (this.tempCurrentPower !== '' && this.tempToPower !== '') {
                return `战力 ${this.tempCurrentPower}分 - ${this.tempToPower}分`;
            } else if (this.tempCurrentPower !== '') {
                return `战力 ${this.tempCurrentPower}分`; // Handle case where only current power is entered initially
            }
            return '';
        },
        roleDisplay() {
            if (this.tempMingwenLevel !== '' && this.tempHeroCount !== '') {
                return `铭文 ${this.tempMingwenLevel}级 英雄 ${this.tempHeroCount}个`;
            } else if (this.tempMingwenLevel !== '') {
                return `铭文 ${this.tempMingwenLevel}级`;
            } else if (this.tempHeroCount !== '') {
                return `英雄 ${this.tempHeroCount}个`;
            }
            return '';
        },
        peakRankDisplay() {
            if (this.selectedbranchRoads && this.tempNowScore !== '' && this.tempToScore !== '') {
                return `${this.selectedbranchRoads} ${this.tempNowScore}分 - ${this.tempToScore}分`;
            }
            return '';
        },
        normalRankDisplay() {
            if (this.selectedCurrentTask && this.selectedToTask) {
                return `${this.selectedCurrentTask} - ${this.selectedToTask}`;
            }
            return '';
        }
    },
    // Use onLoad for page lifecycle, mounted for component lifecycle in uni-app
    onLoad(options) { // uni-app page lifecycle hook
        console.log("WZDL onLoad triggered", options);
        this.initBidTimeOptions();
        this.initTimeOptions();
        this.calculateTomorrow(); // Ensure tomorrow date is ready
        this.createTaskList();
    },
    mounted() { // Vue component lifecycle hook
        console.log("WZDL mounted triggered");
        // Generally onLoad is preferred for initial data loading in uni-app pages/components acting as pages.
        // If this component could be used *within* another page, mounted might be more appropriate.
        // Ensure hooks aren't called redundantly if both exist.
        if (!this.Task || this.Task.length === 0) {
            // Fallback if onLoad didn't run or data is missing
            console.log("Running init logic in mounted as fallback");
            this.initBidTimeOptions();
            this.initTimeOptions();
            this.calculateTomorrow();
            this.createTaskList();
        }
    },
    methods: {
        // --- Popup Show/Hide Methods (Generic, with ref check) ---
        showPopup(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].open();
            } else {
                console.error(`Popup ref '${refName}' not ready.`);
                uni.showToast({ title: '组件加载中, 请稍后重试', icon: 'none' });
            }
        },
        hidePopup(refName) {
            if (this.$refs[refName]) {
                this.$refs[refName].close();
            } else {
                console.error(`Popup ref '${refName}' not ready.`);
            }
        },

        // --- Conditional Visibility Helpers ---
        isRankVisible() {
            return this.selectedorderType === '限时订单' ||
                (this.selectedorderType === '全胜订单' && this.selectedMode !== '巅峰赛') ||
                this.selectedMode === '荣耀战力' ||
                this.selectedMode === '大国标' ||
                this.selectedMode === '小国标';
        },
        isHeroRelatedMode() {
            return ['荣耀战力', '大国标', '小国标'].includes(this.selectedMode);
        },
        isBidTimeMode() {
            return ['大国标', '小国标'].includes(this.selectedMode);
        },
        isNormalRankMode() {
            return this.selectedorderType !== '限时订单' &&
                this.selectedorderType !== '全胜订单' &&
                this.selectedMode !== '巅峰赛' &&
                !this.isHeroRelatedMode();
        },


        // --- Specific Picker Show/Hide & Select Methods ---
        showServerPicker() { this.showPopup('serverPopup'); },
        hideServerPicker() { this.hidePopup('serverPopup'); },
        selectGroup(index) { this.selectedGroupIndex = index; },
        selectServerItem(item) {
            this.selectedServer = item.text;
            this.hideServerPicker();
            this.calculatePriceAndTime(); // Recalculate on change
        },

        showModePicker() { this.showPopup('modePopup'); },
        hideModePicker() { this.hidePopup('modePopup'); },
        selectModeItem(item) {
            this.selectedMode = item.text;
            this.resetConditionalFields();
            this.hideModePicker();
            this.calculatePriceAndTime();
        },

        showOrderTypePicker() { this.showPopup('orderTypePopup'); },
        hideOrderTypePicker() { this.hidePopup('orderTypePopup'); },
        selectOrderTypeItem(item) {
            this.selectedorderType = item.text;
            this.resetConditionalFields();
            this.hideOrderTypePicker();
            this.calculatePriceAndTime();
        },

        showRoleTypePicker() {
            this.tempMingwenLevel = this.mingwenLevel;
            this.tempHeroCount = this.heroCount;
            this.showPopup('roleTypePopup');
        },
        hideRoleTypePicker() {
            this.hidePopup('roleTypePopup');
        },
        confirmRoleTypePicker() {
            // Add validation (e.g., must be numbers)
            if (isNaN(parseInt(this.tempMingwenLevel)) || (!this.isHeroRelatedMode() && isNaN(parseInt(this.tempHeroCount)))) {
                uni.showToast({ title: '请输入有效的数字', icon: 'none' });
                return;
            }
            this.mingwenLevel = this.tempMingwenLevel;
            this.heroCount = this.tempHeroCount;
            this.hidePopup('roleTypePopup');
            this.calculatePriceAndTime();
        },

        showPowerPicker() {
            this.tempCurrentPower = this.currentPower;
            this.tempToPower = this.toPower;
            this.showPopup('powerPopup');
        },
        hidePowerPicker() {
            this.hidePopup('powerPopup');
        },
        confirmPowerPicker() {
            if (isNaN(parseInt(this.tempCurrentPower)) || (this.selectedMode === '荣耀战力' && isNaN(parseInt(this.tempToPower)))) {
                uni.showToast({ title: '请输入有效的战力值', icon: 'none' });
                return;
            }
            if (this.selectedMode === '荣耀战力' && this.tempToPower && this.tempCurrentPower && parseInt(this.tempToPower) <= parseInt(this.tempCurrentPower)) {
                uni.showToast({ title: '目标战力需大于当前战力', icon: 'none' });
                return;
            }
            this.currentPower = this.tempCurrentPower;
            // Only set toPower if it's relevant for the mode (荣耀战力)
            if (this.selectedMode === '荣耀战力') {
                this.toPower = this.tempToPower;
            } else {
                this.toPower = ''; // Clear if not relevant
            }
            this.hidePopup('powerPopup');
            this.calculatePriceAndTime();
        },

        showHeroPicker() { this.showPopup('heroPopup'); },
        hideHeroPicker() { this.hidePopup('heroPopup'); },
        selectHeroItem(item) {
            console.log("Selected hero item:", item);
            if (item && item.text) {
                this.hero = item.text;
                this.hideHeroPicker();
                this.calculatePriceAndTime();
            } else {
                console.error("Invalid item selected from HeroSelect:", item);
            }
        },

        showBidTimePicker() { this.showPopup('bidTimePopup'); },
        hideBidTimePicker() { this.hidePopup('bidTimePopup'); },
        selectBidTimeItem(item) {
            this.selectedBidTime = item.text;
            this.hideBidTimePicker();
            this.calculatePriceAndTime();
        },

        showCurrentScorePicker() {
            this.tempCurrentScore = this.currentScore;
            this.showPopup('currentScorePopup');
        },
        hideCurrentScorePicker() {
            this.hidePopup('currentScorePopup');
        },
        confirmCurrentScorePicker() {
            if (isNaN(parseInt(this.tempCurrentScore))) {
                uni.showToast({ title: '请输入有效的分数', icon: 'none' });
                return;
            }
            this.currentScore = this.tempCurrentScore;
            this.hidePopup('currentScorePopup');
            this.calculatePriceAndTime();
        },

        showBranchRoadsPicker() { this.showPopup('branchRoadsPopup'); },
        hideBranchRoadsPicker() { this.hidePopup('branchRoadsPopup'); },
        selectBranchRoadsItem(item) {
            this.selectedbranchRoads = item.text;
            this.hideBranchRoadsPicker();
            this.showToScorePicker(); // Auto-open score picker
            // Price might depend on branch road selection
            this.calculatePriceAndTime();
        },

        showToScorePicker() {
            this.tempNowScore = this.nowScore;
            this.tempToScore = this.toScore;
            this.showPopup('toScorePopup');
        },
        hideToScorePicker() {
            this.hidePopup('toScorePopup');
        },
        confirmToScorePicker() {
            if (isNaN(parseInt(this.tempNowScore)) || isNaN(parseInt(this.tempToScore))) {
                uni.showToast({ title: '请输入有效的分数', icon: 'none' });
                return;
            }
            if (this.tempToScore && this.tempNowScore && parseInt(this.tempToScore) <= parseInt(this.tempNowScore)) {
                uni.showToast({ title: '目标分数需大于当前分数', icon: 'none' });
                return;
            }
            this.nowScore = this.tempNowScore;
            this.toScore = this.tempToScore;
            this.hidePopup('toScorePopup');
            this.calculatePriceAndTime();
        },

        // Task/Rank Selection (WZ version)
        createTaskList() {
            const tiers = ['青铜', '白银', '黄金', '铂金', '钻石', '星耀', '王者'];
            const taskList = [];
            tiers.forEach(tier => {
                let tierItem = { text: tier, value: tier, children: [] };
                if (tier === '王者') {
                    tierItem.children = Array.from({ length: 101 }, (_, i) => ({ text: `${i}星`, value: `${i}星` }));
                } else {
                    let subTierNames = [];
                    if (tier === '青铜' || tier === '白银') subTierNames = ['III', 'II', 'I'];
                    else if (tier === '黄金' || tier === '铂金') subTierNames = ['IV', 'III', 'II', 'I'];
                    else if (tier === '钻石' || tier === '星耀') subTierNames = ['V', 'IV', 'III', 'II', 'I'];

                    tierItem.children = subTierNames.map(subName => {
                        let subItem = { text: `${tier}${subName}`, value: `${tier}${subName}`, children: [] };
                        let starCount = 1;
                        if (tier === '青铜' || tier === '白银') starCount = 4;
                        else if (tier === '黄金' || tier === '铂金') starCount = 5;
                        else if (tier === '钻石' || tier === '星耀') starCount = 6;
                        subItem.children = Array.from({ length: starCount }, (_, index) => ({ text: `${index}星`, value: `${index}星` }));
                        return subItem;
                    });
                }
                taskList.push(tierItem);
            });
            this.Task = taskList;
            console.log("WZ Task List Created:", this.Task); // Debug log
        },
        showCurrentTaskTypePicker() { this.showPopup('currentTaskTypePopup'); },
        hideCurrentTaskTypePicker() { this.hidePopup('currentTaskTypePopup'); },
        selectCurrentTaskGroup(index) { this.selectedCurrentTaskGroupIndex = index; },
        selectCurrentTaskItem(tierText, starText) {
            this.selectedCurrentTask = tierText.startsWith('王者') ? `${tierText} ${starText}` : `${tierText} ${starText}`;
            this.hideCurrentTaskTypePicker();
            if (this.isNormalRankMode()) {
                this.showToTaskTypePicker();
            }
            this.calculatePriceAndTime();
        },

        showToTaskTypePicker() { this.showPopup('toTaskTypePopup'); },
        hideToTaskTypePicker() { this.hidePopup('toTaskTypePopup'); },
        selectToTaskGroup(index) { this.selectedToTaskGroupIndex = index; },
        selectToTaskItem(tierText, starText) {
            this.selectedToTask = tierText.startsWith('王者') ? `${tierText} ${starText}` : `${tierText} ${starText}`;
            this.hideToTaskTypePicker();
            this.validateRankOrderWZ();
            this.calculatePriceAndTime();
        },

        validateRankOrderWZ() {
            // Simplified validation: Ensure target rank is not empty if required.
            // Proper comparison is complex and might be better handled server-side or with a dedicated library.
            if (this.isNormalRankMode() && this.selectedCurrentTask && this.selectedToTask) {
                console.log(`Validating WZ Rank: ${this.selectedCurrentTask} -> ${this.selectedToTask}`);
                // Add more robust comparison logic here if needed
            }
            return true; // Placeholder
        },

        // Time Pickers
        initTimeOptions() {
            const now = new Date();
            let arr = [];
            // Start from the next hour
            let startHour = now.getMinutes() > 0 ? now.getHours() + 1 : now.getHours();
            for (let i = startHour; i < 24; i++) {
                arr.push(`${i.toString().padStart(2, '0')}:00`);
            }
            // Add next day's hours
            for (let i = 0; i < 24; i++) {
                arr.push(`${i.toString().padStart(2, '0')}:00`);
            }
            this.timeOptions = arr;
        },
        calculateTomorrow() {
            const now = new Date();
            now.setDate(now.getDate() + 1);
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            this.tomorrow = `${month}月${day}日`;
        },
        initBidTimeOptions() {
            const now = new Date();
            const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
            const nextMonthValue = `${nextMonth.getMonth() + 1}月1日`;
            const nextNextMonth = new Date(now.getFullYear(), now.getMonth() + 2, 1);
            const nextNextMonthValue = `${nextNextMonth.getMonth() + 1}月1日`;
            this.bidTimeTree = [
                { text: nextMonthValue, value: nextMonthValue },
                { text: nextNextMonthValue, value: nextNextMonthValue }
            ];
        },

        showEndTimePicker() {
            this.tempEndTime = this.endTime;
            this.selectedEndTimeIndex = this.timeOptions.indexOf(this.endTime);
            this.showPopup('endTimePopup');
        },
        hideEndTimePicker() { this.hidePopup('endTimePopup'); },
        selectEndTime(time, index) {
            this.tempEndTime = time;
            this.selectedEndTimeIndex = index;
        },
        confirmEndTimePicker() {
            this.endTime = this.tempEndTime;
            this.hideEndTimePicker();
            this.calculatePriceAndTime(); // Recalculate if time affects price
        },

        showOrderDeleteTimePicker() {
            this.tempOrderDeleteTime = this.orderDeleteTime;
            this.selectedOrderDeleteTimeIndex = this.timeOptions.indexOf(this.orderDeleteTime);
            this.showPopup('orderDeleteTimePopup');
        },
        hideOrderDeleteTimePicker() { this.hidePopup('orderDeleteTimePopup'); },
        selectOrderDeleteTime(time, index) {
            this.tempOrderDeleteTime = time;
            this.selectedOrderDeleteTimeIndex = index;
        },
        confirmOrderDeleteTimePicker() {
            if (this.endTime && this.tempOrderDeleteTime) {
                const endTimeMinutes = parseInt(this.endTime.split(':')[0]) * 60 + parseInt(this.endTime.split(':')[1] || 0);
                const deleteTimeMinutes = parseInt(this.tempOrderDeleteTime.split(':')[0]) * 60 + parseInt(this.tempOrderDeleteTime.split(':')[1] || 0);
                // Simple check: allow same hour, assume delete time is on the same 'tomorrow'
                if (deleteTimeMinutes < endTimeMinutes) {
                    uni.showToast({ title: '删除时间不能早于终止时间', icon: 'none' });
                    return;
                }
            }
            this.orderDeleteTime = this.tempOrderDeleteTime;
            this.hideOrderDeleteTimePicker();
        },

        showNeedGamesPicker() { this.showPopup('needGamesPopup'); },
        hideNeedGamesPicker() { this.hidePopup('needGamesPopup'); },
        selectNeedGamesItem(item) {
            this.needGames = item.text;
            this.hideNeedGamesPicker();
            this.calculatePriceAndTime();
        },

        // Helper to reset conditional fields
        resetConditionalFields() {
            // Logic to reset fields based on selectedMode and selectedorderType
            // This needs careful implementation to avoid clearing shared fields incorrectly.

            // Example: Reset time fields if not 限时订单
            if (this.selectedorderType !== '限时订单') {
                this.endTime = ""; this.orderDeleteTime = "";
                this.tempEndTime = ""; this.tempOrderDeleteTime = "";
                this.selectedEndTimeIndex = -1; this.selectedOrderDeleteTimeIndex = -1;
            }
            // Example: Reset needGames if not 全胜订单 (and not 荣耀战力 which uses rank)
            if (!(this.selectedorderType === '全胜订单' && this.selectedMode !== '荣耀战力')) {
                this.needGames = "";
            }
            // ... Reset other fields similarly based on their conditions ...
            this.hero = this.isHeroRelatedMode() ? this.hero : "";
            this.selectedBidTime = this.isBidTimeMode() ? this.selectedBidTime : "";
            this.currentPower = (this.isHeroRelatedMode() || this.isBidTimeMode()) ? this.currentPower : "";
            this.toPower = (this.selectedMode === '荣耀战力') ? this.toPower : "";
            // Keep mingwenLevel if hero related OR not hero related
            this.mingwenLevel = (this.isHeroRelatedMode() || !this.isHeroRelatedMode()) ? this.mingwenLevel : "";
            this.heroCount = !this.isHeroRelatedMode() ? this.heroCount : "";

            this.currentScore = ((this.selectedMode === '10V10排位赛' || this.selectedMode === '巅峰赛') && this.selectedorderType === '全胜订单') ? this.currentScore : "";

            if (!(this.selectedMode === '巅峰赛' && this.selectedorderType !== '全胜订单')) {
                this.selectedbranchRoads = "";
                this.nowScore = ""; this.toScore = "";
                this.tempNowScore = ""; this.tempToScore = "";
            }

            if (!this.isNormalRankMode()) {
                // Decide whether to clear selectedCurrentTask/selectedToTask
                // Maybe keep selectedCurrentTask?
                // this.selectedCurrentTask = "";
                this.selectedToTask = "";
            }

            // Clear temporary input values as well
            this.tempMingwenLevel = this.mingwenLevel;
            this.tempHeroCount = this.heroCount;
            this.tempCurrentPower = this.currentPower;
            this.tempToPower = this.toPower;
            this.tempCurrentScore = this.currentScore;
            // tempNowScore/tempToScore cleared above implicitly

            this.calculatePriceAndTime(); // Recalculate price after reset
        },

        calculatePriceAndTime() {
            console.log("Recalculating price and time...");
            // Placeholder: Implement actual calculation based on state
            this.suggestedPrice = 88; // Example update
            this.estimatedTime = 48; // Example update
        },

        // Form Validation
        validateForm() {
            if (!this.selectedServerText) { uni.showToast({ title: '请选择游戏区服', icon: 'none' }); return false; }
            if (this.selectedorderType !== '限时订单' && !this.selectedMode) { uni.showToast({ title: '请选择代练类型', icon: 'none' }); return false; }
            if (!this.isHeroRelatedMode() && !this.selectedorderType) { uni.showToast({ title: '请选择订单类别', icon: 'none' }); return false; }

            // Validate based on visible fields
            if (this.isRankVisible() && !this.selectedCurrentTask) { uni.showToast({ title: '请选择当前段位', icon: 'none' }); return false; }
            if (this.selectedorderType === '全胜订单' && this.selectedMode !== '荣耀战力' && !this.needGames) { uni.showToast({ title: '请选择需打场次', icon: 'none' }); return false; }
            if (this.selectedorderType === '限时订单') {
                if (!this.endTime) { uni.showToast({ title: '请选择终止时间', icon: 'none' }); return false; }
                if (!this.orderDeleteTime) { uni.showToast({ title: '请选择订单删除时间', icon: 'none' }); return false; }
            }
            if (this.isHeroRelatedMode()) {
                if (!this.hero) { uni.showToast({ title: '请选择英雄名称', icon: 'none' }); return false; }
                if (!this.mingwenLevel) { uni.showToast({ title: '请输入铭文等级', icon: 'none' }); return false; }
            }
            if (this.isBidTimeMode()) {
                if (!this.selectedBidTime) { uni.showToast({ title: '请选择拿标时间', icon: 'none' }); return false; }
                if (!this.currentPower) { uni.showToast({ title: '请输入当前战力', icon: 'none' }); return false; }
            }
            if (this.selectedMode === '荣耀战力') {
                if (!this.currentPower || !this.toPower) { uni.showToast({ title: '请输入当前和目标战力', icon: 'none' }); return false; }
                if (parseInt(this.toPower) <= parseInt(this.currentPower)) { uni.showToast({ title: '目标战力需大于当前战力', icon: 'none' }); return false; }
            }
            if (!this.isHeroRelatedMode() && (!this.mingwenLevel || !this.heroCount)) {
                // Check if *both* are missing for non-hero modes
                if (!this.mingwenLevel && !this.heroCount) {
                    uni.showToast({ title: '请输入铭文等级或英雄数量', icon: 'none' }); return false;
                } // Allow one or the other? Or require both? Adjust as needed. Let's assume both required.
                if (!this.mingwenLevel) { uni.showToast({ title: '请输入铭文等级', icon: 'none' }); return false; }
                if (!this.heroCount) { uni.showToast({ title: '请输入英雄数量', icon: 'none' }); return false; }
            }
            if (((this.selectedMode === '10V10排位赛' || this.selectedMode === '巅峰赛') && this.selectedorderType === '全胜订单') && !this.currentScore) { uni.showToast({ title: '请输入当前分数', icon: 'none' }); return false; }
            if (this.selectedMode === '巅峰赛' && this.selectedorderType !== '全胜订单') {
                if (!this.selectedbranchRoads) { uni.showToast({ title: '请选择分路位置', icon: 'none' }); return false; }
                if (!this.nowScore || !this.toScore) { uni.showToast({ title: '请输入当前和目标分数', icon: 'none' }); return false; }
                if (parseInt(this.toScore) <= parseInt(this.nowScore)) { uni.showToast({ title: '目标分数需大于当前分数', icon: 'none' }); return false; }
            }
            if (this.isNormalRankMode() && (!this.selectedCurrentTask || !this.selectedToTask)) { uni.showToast({ title: '请选择当前和目标段位', icon: 'none' }); return false; }
            // if (this.isNormalRankMode() && !this.validateRankOrderWZ()) { return false; }

            return true;
        },

        // Submit Order
        submitOrder() {
            if (!this.validateForm()) {
                return;
            }

            const orderData = {
                server: this.selectedServerText,
                mode: this.selectedMode,
                orderType: this.selectedorderType,
                // Conditional fields - ensure values are from confirmed state (not temp)
                ...(this.isRankVisible() && { currentTask: this.selectedCurrentTask }),
                ...(this.selectedorderType === '全胜订单' && this.selectedMode !== '荣耀战力' && { needGames: this.needGames }),
                ...(this.selectedorderType === '限时订单' && { endTime: this.endTimeDisplay, orderDeleteTime: this.orderDeleteTimeDisplay }),
                ...(this.isHeroRelatedMode() && { hero: this.hero, mingwenLevel: this.mingwenLevel }),
                ...(this.isBidTimeMode() && { selectedBidTime: this.selectedBidTime, currentPower: this.currentPower }),
                ...(this.selectedMode === '荣耀战力' && { currentPower: this.currentPower, toPower: this.toPower }),
                ...(!this.isHeroRelatedMode() && { mingwenLevel: this.mingwenLevel, heroCount: this.heroCount }),
                ...(((this.selectedMode === '10V10排位赛' || this.selectedMode === '巅峰赛') && this.selectedorderType === '全胜订单') && { currentScore: this.currentScore }),
                ...(this.selectedMode === '巅峰赛' && this.selectedorderType !== '全胜订单' && { branchRoads: this.selectedbranchRoads, nowScore: this.nowScore, toScore: this.toScore }),
                ...(this.isNormalRankMode() && { currentTask: this.selectedCurrentTask, toTask: this.selectedToTask }),

                suggestedPrice: this.suggestedPrice,
                estimatedTime: this.estimatedTime,
            };

            // Clean null/undefined values before submitting
            Object.keys(orderData).forEach(key => {
                if (orderData[key] === null || orderData[key] === undefined || orderData[key] === '') {
                    // Be careful about deleting empty strings if they are valid empty selections
                    // Maybe only delete null/undefined? Or handle empty string based on field.
                    // For now, let's keep potentially empty strings but remove null/undefined.
                    if (orderData[key] === null || orderData[key] === undefined) {
                        delete orderData[key];
                    }
                }
            });

            console.log("准备提交的订单数据 (WZ DL):", orderData);

            uni.navigateTo({
                url: `/pages/SubmitOrder/DL/WZsubmitOrder/index?formData=${encodeURIComponent(JSON.stringify(orderData))}`
            });
        }
    }
}
</script>

<style>
/* 使用与 YXLM 一致的样式，添加 WZDL 特定调整 */
.container.wzdl {
    /* Add specificity */
    padding-bottom: 180rpx;
}

.form {
    width: 100%;
    background-color: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
}

.form-item {
    margin-bottom: 30rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #f0f0f0;
    padding-bottom: 30rpx;
}

.form-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    /* Remove margin for last item in form group */
}

.form-item .label {
    width: 30%;
    height: 100%;
    display: block;
    font-size: 28rpx;
    color: #333;
    flex-shrink: 0;
    /* Prevent label from shrinking */
}

.form-item .handle {
    width: 70%;
    cursor: pointer;
}

.picker,
.input {
    /* Style consistency */
    width: 100%;
    height: 80rpx;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #666;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10rpx;
    min-height: 50rpx;
    /* Use min-height for flexibility */
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #666;
    text-align: right;
    /* Ensure text aligns right */
}

.selected-tag image {
    padding-left: 15rpx;
    width: 24rpx;
    height: 24rpx;
    flex-shrink: 0;
    /* Prevent icon shrinking */
}

/* Popup Styles (Ensure consistency with YXLMDL) */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}

.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    padding: 30rpx 20rpx 20rpx;
    border-bottom: 1rpx solid #eee;
}

.popup-content .body {
    max-height: 70vh;
    display: flex;
}

.popup-nav {
    width: 200rpx;
    border-right: 1px solid #eee;
    background-color: #f8f8f8;
    height: 70vh;
    /* Match body max-height */
}

.nav-item {
    padding: 25rpx 20rpx;
    font-size: 28rpx;
    color: #666;
    text-align: center;
    border-bottom: 1rpx solid #eee;
}

.nav-item:last-child {
    border-bottom: none;
}

.nav-item.active {
    color: #1ba035;
    /* Or your primary color */
    font-weight: bold;
    background-color: #fff;
}

.popup-scroll {
    flex: 1;
    height: 70vh;
    /* Match body max-height */
    overflow-y: auto;
    /* Ensure scrollability */
}

.popup-item {
    padding: 25rpx 40rpx;
    font-size: 28rpx;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    cursor: pointer;
}

.popup-item:active {
    background-color: #f0f0f0;
}

.popup-item:last-child {
    border-bottom: none;
}

/* Styles for Rank Selection Popup (WZ needs specific layout) */
.popup-item-subtier {
    margin-bottom: 15rpx;
}

.popup-item-title {
    /* Title for sub-tiers like '钻石V' */
    font-size: 28rpx;
    font-weight: bold;
    padding: 10rpx 20rpx;
    text-align: left;
    color: #555;
}

.popup-item-body {
    /* Container for stars/ranks */
    display: flex;
    flex-wrap: wrap;
    padding: 0 20rpx 10rpx;
    /* Adjust padding */
    justify-content: flex-start;
}

.rank-body {
    /* Alias for consistency */
    justify-content: flex-start;
}

.popup-item-body-item {
    /* Individual rank/star button */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90rpx;
    /* Adjust width */
    padding: 12rpx 20rpx;
    /* Adjust padding */
    border: 1px solid #ccc;
    border-radius: 8rpx;
    box-sizing: border-box;
    margin: 8rpx;
    /* Adjust margin */
    font-size: 26rpx;
    cursor: pointer;
}

.rank-item {
    /* Alias */
    min-width: 90rpx;
    padding: 12rpx 20rpx !important;
    margin: 8rpx !important;
}

.popup-item-body-item:active {
    background-color: #e0e0e0;
    border-color: #bbb;
}

.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28rpx;
    color: #999;
}

/* Input Popups (Use consistent style from YXLMDL) */
.input-popup .input-row {
    display: flex;
    align-items: center;
    padding: 25rpx 40rpx;
    border-bottom: 1rpx solid #eee;
}

.input-popup .input-row span {
    width: 30%;
    font-size: 28rpx;
    color: #333;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.input-popup .input-row input {
    flex: 1;
    font-size: 28rpx;
    text-align: right;
    color: #333;
    padding-left: 10rpx;
    /* Add some padding */
}

.input-popup .input-row input::placeholder {
    color: #ccc;
}

.input-popup .score-input input::placeholder {
    font-size: 26rpx;
}

/* Popup Footer Styles (Consistent) */
.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    padding: 25rpx;
    color: #666;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-footer:active {
    background-color: #f0f0f0;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 16px;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 25rpx;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-footer2 .cancel {
    color: #198dda;
}

.popup-footer2 .cancel:active {
    background-color: #f2f2f2;
}

.popup-footer2 .confirm {
    background-color: #198dda;
    color: #fff;
}

.popup-footer2 .confirm:active {
    background-color: #157ab3;
}

/* Time Selector Styles */
.time-selector {
    width: 100%;
    display: flex;
    max-height: 60vh;
    /* Limit overall height */
}

.time-scroll {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 60vh;
    /* Match container max-height */
    overflow-y: auto;
}

.time-scroll:first-child {
    /* Date display column */
    justify-content: flex-start;
    padding-top: 30rpx;
    border-right: 1rpx solid #eee;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.time-scroll .date-display {
    text-align: center;
    font-size: 30rpx;
    color: #333;
    padding-bottom: 20rpx;
    font-weight: bold;
}

.time-scroll .time-item {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.time-scroll .time-item:last-child {
    border-bottom: none;
}

.time-scroll .time-item.selected {
    color: #007aff;
    font-weight: bold;
    background-color: #e6f2ff;
}

/* Order Message Area (Consistent) */
.orderMsg {
    width: 100%;
    display: flex;
    padding: 30rpx 40rpx;
    box-sizing: border-box;
    background-color: #f8f8f8;
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
    margin-top: 20rpx;
    /* Add some space above */
}

.orderMsg .pay,
.orderMsg .time {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orderMsg .pay image,
.orderMsg .time image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 15rpx;
}

.orderMsg .pay .text,
.orderMsg .time .text {
    font-size: 26rpx;
    color: #666;
}

.price-highlight,
.time-highlight {
    color: red;
    font-weight: bold;
    margin-left: 5rpx;
}

/* Footer (Consistent) */
.footer-placeholder {
    height: 180rpx;
}

.footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 10;
    border-top: 1rpx solid #e0e0e0;
}

.footer .tip {
    width: 100%;
    font-size: 24rpx;
    color: #999;
    background-color: #f8f8f8;
    padding: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.footer .button {
    width: 100%;
    height: 100rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007aff;
    font-size: 32rpx;
    font-weight: bold;
    cursor: pointer;
}

.footer .button:active {
    background-color: #0056b3;
}
</style>